<template>
  <div>
    <div>
      <el-form :inline="true" size="samll" v-if="type!='look'">
        <el-form-item clearable>
          <el-select v-model="queryObj.series_id" placeholder="请选择线路系列">
            <el-option
              v-for="item in seriesList"
              :key="item.series_id"
              :label="item.series_name"
              :value="item.series_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item clearable>
          <el-select v-model="queryObj.lable_id" placeholder="请选择线路标签">
            <el-option
              v-for="item in tagList"
              :key="item.lable_id"
              :label="item.lable_name"
              :value="item.lable_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入关键字" v-model="queryObj.query_value">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium"
            ><i class="iconfont icon-search"></i>搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="flex">
      <!-- //左边 -->
      <div class="listcon">
        <div class="myheader">
          已选择<span class="red">{{ leftlen }}</span
          >条
        </div>
        <div class="mybody">
          <div class="item" v-for="item in mainList" :key="item.commodity_id">
            <el-checkbox v-model="item.check" >{{item.commodity_name}}</el-checkbox>
          </div>
        </div>
        <div class="myfooter">
          <el-button size="small" :disabled="type=='look'" @click="checkAll(mainList)">全选</el-button>
          <el-button type="primary" :disabled="type=='look'" size="small" @click="goout">确定</el-button>
        </div>
      </div>
      <!-- 中间 -->
      <div class="mid">
        <div class="p">
          <el-radio :disabled="type=='look'" v-model="isBothway" label="0">单向关联</el-radio>
        </div>
        <div class="p">
          <el-radio :disabled="type=='look'" v-model="isBothway" label="1">双向关联</el-radio>
        </div>
      </div>
      <!-- // 右边 -->
      <div class="listcon">
        <div class="myheader">
          已选择<span class="red">{{ rightlen }}</span
          >条
        </div>
        <div class="mybody">
          <div class="item" v-for="item in relList" :key="item.commodity_id">
            <el-checkbox v-if="type!='look'" v-model="item.check" >{{item.commodity_name}}</el-checkbox>
            <span v-if="type=='look'">{{item.commodity_name}}</span>
          </div>
        </div>
        <div class="myfooter">
          <el-button :disabled="type=='look'" size="small"  @click="checkAll(relList)">全选</el-button>
          <el-button :disabled="type=='look'" type="primary" size="small" @click="goin">移除</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSeriesAll } from 'api/lineManagement/seriesMgAPI';
import { getLablePageAll } from 'api/lineManagement/tagMgAPI';
import { getCommodityList } from 'api/lineManagement/lineCommodity';
import {deepClone} from 'common/js/util';
export default {
  props: ['type'],
  components: {},
  computed: {
    leftlen(){
      let i = 0
      this.mainList.forEach(item => {
        if(item.check){
          i++
        }
      })
      return i;
    },
    rightlen(){
      let i = 0
      this.relList.forEach(item => {
        if(item.check){
          i++
        }
      })
      return i;
    }
  },
  data() {
    return {
      queryObj: {},
      isBothway: '1',
      seriesList: [],
      tagList: [],
      mainList: [],
      relList: [],
      currCommodity_id: null,
      page: {
        total: 0,
        page: 1,
        limit: 10
      }
    };
  },
  methods: {
    checkAll(arr) {
      arr.forEach(item => {
        item.check = true
      })
    },
    setData(val) {
      // console.log('到这', val.commodity_id)
      this.currCommodity_id = val.commodity_id
      let obj = deepClone(val.relevanceInfo)
      this.isBothway = obj.is_bothway
      obj.tjcommodityArr.forEach(item => {
        item.commodity_id = item.tj_commodity_id
      })
      this.relList = obj.tjcommodityArr
    },
    async getData() {
      let obj = {}
      obj.relevanceInfo = {
        is_bothway: this.isBothway,
      }
      obj.relevanceInfo.tjcommodityArr = this.relList.map(item => {
        return {tj_commodity_id: item.commodity_id, tj_commodity_name: item.commodity_name}
      })
      return obj
    },
    // 获取系列列表
    async _getSeriesAll() {
      let res = await getSeriesAll();
      this.seriesList = res.rData;
    },
    // 获取全部标签
    async _getLablePageAll() {
      let res = await getLablePageAll();
      this.tagList = res.rData;
    },
    // 获取线路列表
    _mainList() {
      let data = { ...this.queryObj };
      data.pageInfo = { ...this.page };
      getCommodityList(data).then(res => {
        let pageInfo = res.pageInfo;
        this.page.total = pageInfo.Total;
        this.page.page = pageInfo.page;
        res.rData.forEach(item => {
          item.check = false
        })
        this.mainList = res.rData;
      });
    },
    // 数组去重
    delRepeat(arr) {
      let obj = {}
      let myarr = []
      arr.forEach(item => {
        if(!obj[item.commodity_id]){
          obj[item.commodity_id] = 1
          myarr.push(item)
        }
      })
      return myarr
    },
    // 右边框
    goout() {
      let checkArr = []
      let noCheckArr = []
      this.mainList.forEach(item => {
        if(item.commodity_id == this.currCommodity_id) {
          return
        }
        if(item.check) {
          item.check = false
          checkArr.push(item)
        } else {
          noCheckArr.push(item)
        }
      })
      this.mainList = noCheckArr
      this.relList = this.delRepeat(this.relList.concat(checkArr))
    },
    goin() {
      let checkArr = []
      let noCheckArr = []
      this.relList.forEach(item => {
        if(item.check) {
          item.check = false
          checkArr.push(item)
        } else {
          noCheckArr.push(item)
        }
      })
      this.relList = noCheckArr
      console.log(checkArr)
      this.mainList = this.delRepeat(this.mainList.concat(checkArr))
    }
  },
  mounted() {
    if(this.type!='look') {
      this._getSeriesAll()
      this._getLablePageAll()
      this._mainList()
    }
  }
};
</script>

<style lang="scss" scoped>
.mid {
  margin: 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .p {
    height: 35px;
  }
}
.listcon {
  background: #f5f5f5;
  border-radius: 5px;
  width: 300px;
  border: 1px solid #ddd;
  .myheader {
    height: 45px;
    line-height: 45px;
    color: #666;
    padding-left: 16px;
    border-bottom: 1px solid #ddd;
  }
  .mybody {
    height: 300px;
    overflow: auto;
    background: #fff;
    .item {
      line-height: 35px;
      padding-left: 16px;
      border-bottom: 1px solid #ddd;
    }
  }
  .myfooter {
    height: 45px;
    line-height: 45px;
    padding-left: 16px;
    border-top: 1px solid #ddd;
  }
}
</style>
